<template>
    <div class="container">
        <div id="map" class="map"></div>
        <h1 id="msg" class="side">{{ msg }}</h1>
    </div>
</template>
<script lang="ts" setup>
import * as ol from 'ol';
import { Feature, Map, View } from 'ol';
import GeoJSON from 'ol/format/GeoJSON';
import { Draw } from 'ol/interaction';
import { Vector as VectorLayer } from 'ol/layer';
import TileLayer from 'ol/layer/Tile';
import { Vector as VectorSource, XYZ } from 'ol/source';
import { Fill, Icon, Stroke, Style } from 'ol/style';
import { onMounted, ref } from 'vue';
import { Circle, LineString, Point, Polygon } from 'ol/geom';
import { Select } from 'ol/interaction';
import { singleClick } from 'ol/events/condition';

const msg = ref();

function initMap() {
    // 创建地图
    const map = new ol.Map({
        target: 'map',
        layers: [
            new TileLayer({
                source: new XYZ({
                    url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7`
                })
            })
        ],
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [119.2, 29.2],
            zoom: 10
        })
    });

    // 创建要素图层
    const vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: [
                new ol.Feature({
                    geometry: new Polygon([
                        [
                            [119.0, 29.0],
                            [119.2, 29.0],
                            [119.2, 29.2],
                            [119.0, 29.2],
                            [119.0, 29.0]
                        ]
                    ]),
                    name: 'A'
                }),
                new ol.Feature({
                    geometry: new Polygon([
                        [
                            [119.4, 29.0],
                            [119.6, 29.0],
                            [119.5, 29.2],
                            [119.4, 29.0]
                        ]
                    ]),
                    name: 'B'
                }),
                new ol.Feature({
                    geometry: new LineString([
                        [119.0, 29.4],
                        [119.2, 29.3],
                        [119.4, 29.5],
                        [119.6, 29.3],
                        [119.8, 29.6]
                    ]),
                    name: 'C'
                }),
                new ol.Feature({
                    geometry: new Point([119.4, 29.6]),
                    name: 'D'
                })
            ]
        }),
        style: new Style({
            stroke: new Stroke({
                width: 4,
                color: 'blue'
            }),
            fill: new Fill({
                color: 'yellow'
            })
        })
    });

    map.addLayer(vectorLayer);

    // 创建点选工具
    const interaction = new Select({
        condition: singleClick,
        style: new Style({
            stroke: new Stroke({
                width: 4,
                color: 'red'
            }),
            fill: new Fill({
                color: 'green'
            })
        }),
        layers: [vectorLayer]
    });

    // 监听select事件
    interaction.on('select', function (e) {
        console.log(e.selected, 'select=');
        msg.value = '';
        if (e.selected.length > 0) {
            const feature = e.selected[0];
            const name = feature.get('name');
            msg.value = '被选中的要素：' + name;
        }
    });

    // 添加单选工具
    map.addInteraction(interaction);
}
onMounted(() => {
    initMap();
});
</script>
<style lang="scss">
.container {
    width: 100%;
    height: 100%;
    position: relative;
    .map {
        width: 100%;
        height: 100%;
    }
    .side {
        position: absolute;
        top: 10px;
        left: 50px;
    }
}
</style>